<template>
  <div class="app-container">
    <el-row :gutter="20" class="row-con">
      <!--侧边工厂树数据-->
      <el-col :xs="9" :sm="6" :md="7" :lg="5" :xl="6">
        <el-card class="box-card card">
          <div class="head-container">
            <el-input
              v-model="filterText"
              clearable
              size="small"
              placeholder="输入名称搜索"
              prefix-icon="el-icon-search"
              class="filter-item"
            />
          </div>

          <el-tree
            class="filter-tree"
            ref="factoryTree"
            :load="loadNode"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            lazy
            v-loading="treeLoading"
            node-key="id"
          >
          </el-tree>
        </el-card>
      </el-col>

      <el-col :xs="15" :sm="18" :md="17" :lg="19" :xl="18">
        <el-card class="box-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="班次管理" name="first">
              <classes ref="first"  :modelCode="modelCode"></classes>
            </el-tab-pane>
            <el-tab-pane label="计划停产管理" name="second">
              <planHaltProduction ref="second" :modelCode="modelCode"></planHaltProduction>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import crudFactoryModel from "@/api/factory/factoryModel";
  import CRUD, {presenter, header, form, crud} from "@crud/crud";
  import rrOperation from "@crud/RR.operation";
  import crudOperation from "@crud/CRUD.operation";
  import udOperation from "@crud/UD.operation";
  import pagination from "@crud/Pagination";
  import classes from "./index";
  import planHaltProduction from "../plan_halt_production/index";

  const defaultForm = {
    id: null,
    modelCode: null,
    modelName: null,
    modelType: null,
    remark: null,
    pid: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
  };
  export default {
    name: "ShiftDetails",
    components: {
      pagination,
      crudOperation,
      rrOperation,
      udOperation,
      classes,
      planHaltProduction
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({
        title: "建模",
        url: "api/factoryModel",
        idField: "id",
        sort: "id,desc",
        queryOnPresenterCreated: false,
        crudMethod: {...crudFactoryModel},
      });
    },
    watch: {
      //搜索框
      filterText(val) {
        this.$refs.factoryTree.filter(val);
      },
    },
    computed: {
      currentName() {
        return this.types[this.detailsData.modelType];
      },
      chidrenName() {
        return this.types[this.detailsData.modelType * 1 + 1];
      },
    },
    data() {
      return {
        pid: null,
        //权限
        permission: {
          add: ["admin", "factoryModel:add"],
          edit: ["admin", "factoryModel:edit"],
          del: ["admin", "factoryModel:del"],
        },
        //搜索框数据
        filterText: "",
        treeLoading: false,
        treeNode: null,
        modelCode:"",
        activeName: 'first',
        //树配置
        defaultProps: {
          children: "children",
          label: "modelName",
        },
        //详情数据
        detailsData: defaultForm,
        types: {
          0: "工厂",
          1: "车间",
          2: "产线",
          3: "工段",
          4: "工位",
        },
      };
    },
    methods: {
      //过滤
      filterNode(value, data) {
        if (!value) return true;
        return data.modelName.indexOf(value) !== -1;
      },
      //Tabs 切换
      handleClick(tab, event) {
        if (tab.name == "first") {
          this.$refs.first.queryPage(this.modelCode);
        } else if (tab.name == "second") {
          this.$refs.second.queryPage(this.modelCode);
        }
      },
      //加载树
      loadNode(node, resolve) {
        this.treeLoading = true;
        const params = {pid: 0, id: null};
        if (node.level === 0) {
          params.pid = 0;
          // 树的根节点的传参，需带上父组件传来的ID，否则一个页面会有多个根节点
        } else {
          params.pid = node.data.id;
        }
        let arr = ["0", "1", "2"]
        setTimeout(() => {
          crudFactoryModel.getModels(params).then((res) => {
            let list = []
            //过滤数组只展示0：工厂，1：车间，2：产线
            res.content.forEach((item) => {
              if (arr.some(ele => ele == item.modelType)) {
                list.push(item)
              }
            })
            if (!this.modelCode) {
              this.modelCode = list[0].modelCode
            }
            resolve(list);
            this.treeData = res.content;
            this.treeLoading = false;
          });
        }, 200);
      },
      //树点击事件
      handleNodeClick(data, node) {
        this.modelCode = node.data.modelCode;
      },

      //详情刷新之后
      [CRUD.HOOK.afterRefresh]() {
        this.detailsData =
          this.crud.data.length > 0 ? this.crud.data[0] : defaultForm;
        return true;
      },


    },
    mounted: function () {
      const that = this;
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + "px;";
      };
    },
  };
</script>
<style scoped>
  .details-title {
    font-size: 18px;
    color: #333;
    font-weight: 700;
  }

  .row-con {
    display: flex;
    flex-flow: row wrap;
  }

  .row-con .card {
    height: 100%;
  }
</style>
